<template>
  <div class="app-container">

    <el-button type="primary" @click="openCheckForm" style="margin-bottom: 10px"
      >添加考核项</el-button
    >
    <el-table
      border
      style="width: 100%"
      :data="formList"
      show-summary
      :span-method="horizontalMerger"
    >
      <el-table-column
        prop="fieldName"
        label="考核项名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="score"
        label="分值"
        align="center"
      ></el-table-column>
      <el-table-column prop="descs" label="考核内容描述"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.userId !== 44"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleOptUpdate(scope.row)"
            >修改</el-button
          >
          <!-- <el-button
            v-if="scope.row.userId !== 44"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleOptDelete(scope.row)"
            v-hasPermi="['companyService:supplier:query']"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      width="520px"
      :title="optMap[dialogStatus]"
      :visible.sync="innerVisible"
      append-to-body
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="formRules"
        label-width="110px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="考核项名称" prop="fieldName">
              <el-input v-model="addForm.fieldName" type="text" autosize />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="考核具体内容"
              prop="descs"
              :show-overflow-tooltip="true"
            >
              <el-input v-model="addForm.descs" type="textarea" autosize />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分值" prop="score">
              <el-input-number v-model="addForm.score" :min="1" :max="100000" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormOpt">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      textMap: {
        update: "修改",
        create: "发布",
      },
      optMap: {
        update: "修改",
        create: "添加",
      },
      innerVisible: false,
      formList: [
        { fieldName: "企业考核", score: 10, descs: "企业考核描述1" },
        { fieldName: "企业考核", score: 20, descs: "企业考核描述2" },
      ],
      addForm: {
        fieldName: undefined,
        descs: undefined,
        score: undefined,
      },
    };
  },
  created() {},
  methods: {
	/**
		 * 封装--合并单元格--合并行
		 */
		horizontalMerger({
			row,
			column,
			rowIndex,
			columnIndex
		}) {
			if (row[column.property]) { // 空值不参与合并
				const sub = this.horiKeys.findIndex(item => item === column.property)
				// 判断当前单元格是否在合并keys中
				if (sub !== -1) {
					return this.whetherHorizontal(row[column.property], sub, this.horiKeys, rowIndex)
				}
			}
		},
		/**
		 * 调用--获取合并行个数
		 * @param {String} value 单元格value
		 * @param {Number} sub 单元格key所在keys集合的下标
		 * @param {Array} keys 参与合并的keys集合
		 * @param {Number} rowIndex 当前数据所在行数（下标）
		 */
		whetherHorizontal(value, sub, keys, rowIndex) {
			const list = this.tableData // 获取当前页所有数据
			// 如果上一项存在并和该项相同，则该单元格被合并
			if (sub > 0 && list[rowIndex[keys[sub - 1]]] === value) {
				return [0, 0]
			}
			const num = this.getHorizontalSum(value, list[rowIndex], keys, sub, 1)
			return [1, num]
		},
		/**
		 * 递归--查询合并数量
		 * @param {String} value 单元格value
		 * @param {list} data 当前行数据
		 * @param {String} keys 需要合并key集合
		 * @param {Number} sub 单元格key在key集合中的下标
		 * @param {Number} sum 合并个数（递归增加）
		 */
		getHorizontalSum(value, data, keys, sub, sum) {
			if (keys[sub + 1]) {
				if (data[keys[sub + 1]] === value) {
					return this.getHorizontalSum(value, data, keys, sub + 1, sum + 1)
				} else {
					return sum
				}
			} else {
				return sum
			}
		},
    // 取消按钮
    cancel() {
      this.innerVisible = false;
    },
    //打开添加审核项目表单
    openCheckForm: function () {
      this.dialogStatus = "create";
      this.innerVisible = true;
    },
    submitFormOpt: function () {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.formList.push(this.addForm);
          this.innerVisible = false;
          this.addForm = {};
        }
      });
    },
    handleOptUpdate: function (row) {
      this.dialogStatus = "update";
      this.innerVisible = true;
    },
  },
};
</script>
<style scoped>
.el-date-editor .el-range-separator {
  width: 10%;
}
</style>
<style scoped>
.dialogImg >>> .el-dialog__body {
  text-align: center;
  overflow: auto;
}
</style>